<template>
  <div class="board-progress">
    <div class="progress-top">
      <div>{{props.text}}</div>
      <div>{{props.value}}&nbsp;{{props.unit}}</div>
    </div>
    <Progress :strokeWidth="15" :percent="props.percent" :showInfo="false" :strokeColor="props.strokeColor"
      :trailColor="props.trailColor || `rgba(33, 61, 95, 0.6)`"></Progress>
  </div>
</template>
<script lang="ts" setup>
import { defineProps } from 'vue';
import { Progress } from 'ant-design-vue';

const props = defineProps<{
  text: string,
  value: number,
  unit: string,
  strokeColor: any,
  trailColor?: any,
  percent: number
}>();
</script>

<style lang="less" scoped>
.board-progress {
  padding: 0.5vh 1vh 0 1vh;
  overflow: hidden;
  .progress-top {
    display: flex;
    justify-content: space-between;
    color: rgb(2, 241, 252);
    font-size: 1.6vh;
    line-height: 1.6vh;
  }
}
</style>
